import { useEcharts } from "@/plugins/echarts";
import { useI18n } from "@/plugins/i18n";
import { usePxUi } from "@/plugins/pxUi";
import { setupStore } from "@/store";
import { injectResponsiveStorage } from "@/utils/responsive";
import { useGetStaticUrl, useDownloadEcharts, useInitLoading } from "@/hooks/useCommon";
import * as Icons from "@px-ui/icons-vue";
import { MotionPlugin } from "@vueuse/motion";
import { createApp, type Directive } from "vue";
import App from "./App.vue";
import { getPlatformConfig } from "./config";
import router from "./router";
// 引入px-ui样式
import "px-ui/dist/index.css";
// 导入字体图标
import "./assets/iconfont/iconfont.css";
import "./assets/iconfont/iconfont.js";
// 引入和风天气字体文件
import "qweather-icons/font/qweather-icons.css";
// 导入公共样式
import { addDateRange, download, parseTime, resetForm, selectDictLabel, selectDictLabels } from "@/utils/pengxi";
import "./style/form.scss";
import "./style/index.scss";
import "./style/table.scss";
import "./style/visual.scss";
// 分页组件
import Pagination from "@/components/Pagination/index.vue";
import { defineAsyncComponent } from "vue";
//vex table
import VxeUITable from "vxe-table";
import "vxe-table/lib/style.css";
import drag from "v-drag";

const { VITE_ENV_NAME } = import.meta.env;
// fac_test 和 uat显示stic图标
if (VITE_ENV_NAME === "fac_test" || VITE_ENV_NAME === "uat" || VITE_ENV_NAME === "prod") {
  document.title = "创新智慧厂务管理平台";
  let link = document.querySelector("link[rel*='icon']") || document.createElement("link");
  link.href = "/logostic.png";
  document.getElementsByTagName("head")[0].appendChild(link);
} else {
  document.title = "IFP智慧厂务系统";
  let link = document.querySelector("link[rel*='icon']") || document.createElement("link");
  link.href = "/logo.png";
  document.getElementsByTagName("head")[0].appendChild(link);
}

const app = createApp(App);
const px2rem = (px: any) => {
  if (/%/gi.test(px)) {
    return px;
  } else {
    return (parseFloat(px) / 16).toFixed(6) + "rem";
  }
};
app.config.globalProperties.$px2rem = px2rem;
// 自定义指令
import * as directives from "@/directives";
Object.keys(directives).forEach(key => {
  app.directive(key, (directives as { [key: string]: Directive })[key]);
});
// 注册PxUI Icons组件
Object.keys(Icons).forEach(key => {
  app.component(key, Icons[key as keyof typeof Icons]);
});

// 全局方法挂载
app.config.globalProperties.download = download;
app.config.globalProperties.parseTime = parseTime;
app.config.globalProperties.resetForm = resetForm;
app.config.globalProperties.addDateRange = addDateRange;
app.config.globalProperties.selectDictLabel = selectDictLabel;
app.config.globalProperties.selectDictLabels = selectDictLabels;
app.config.globalProperties.useGetStaticUrl = useGetStaticUrl;
app.config.globalProperties.useDownloadEcharts = useDownloadEcharts;
app.config.globalProperties.useInitLoading = useInitLoading;
// 全局组件挂载
app.component("Pagination", Pagination);

// 全局注册`@iconify/vue`图标库
import { FontIcon, IconifyIconOffline, IconifyIconOnline } from "./components/ReIcon";
app.component("IconifyIconOffline", IconifyIconOffline);
app.component("IconifyIconOnline", IconifyIconOnline);
app.component("FontIcon", FontIcon);

const components = [
  "VText",
  "VPicture",
  "VButton",
  "SVGStar",
  "SVGTriangle",
  "VTable",
  "VChart",
  "VLocation",
  "MessageLocation",
  "TextLocation",
  "LayerFilter",
  "LayerDepFilter",
  "FilterMenu",
  "ListMonitor",
  "ListMonitor2",
  "ListInDetect",
  "ListInDetect2",
  "ListDepNotice",
  "middleTip",
  "VCamera",
  "Group",
  "ListStat",
  "ListIndex",
  "DrillLocation",
  "VChartPie",
  "VChartLine",
  "PosFilter",
  "DepFilter",
  "TableAlert",
  "ListProgress",
  "ColorLocation",
  "VImage",
  "VChartGauge",
  "RectLocation",
  "layerSwitch",
  "ThreeSupervison",
  "DrillLocation2",
  "TableCom",
  "TableDetector",
  "VChartBar",
  "waterStat",
  "equipRouter",
  "ColorMarking",
  "FabAlert",
  "ComplexComp"
  // "Scale"
];

components.forEach(key => {
  app.component(
    key,
    defineAsyncComponent(() => import(`@visual/custom-component/${key}/Component.vue`))
  );
  app.component(
    key + "Attr",
    defineAsyncComponent(() => import(`@visual/custom-component/${key}/Attr.vue`))
  );
});

getPlatformConfig(app).then(async config => {
  setupStore(app);
  app.use(router);
  await router.isReady();
  injectResponsiveStorage(app, config);
  app.use(MotionPlugin).use(useI18n).use(usePxUi).use(useEcharts);
  app.use(VxeUITable);
  app.use(drag);
  app.mount("#app");
});
